<template>
    <div class="wrap">
		<div class="party-head">
            <img src="@/assets/images/smartGrid/guxinMap.png" alt="">
            <div class="txt">
                <p class="title">阜新网格</p>
                <p class="mark">管理网格员：王小明</p>
                <p>街村-达子营村-阜新网格</p>
            </div>
        </div>
        <el-row class="party-info">
            <el-col :span="12"><div class="grid-content bg-purple">人口总额</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">20,122</div></el-col>
        </el-row>
        <el-row class="party-info">
            <el-col :span="12"><div class="grid-content bg-purple">男女比例</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">1.73:1</div></el-col>
        </el-row>
        <el-row class="party-info">
            <el-col :span="12"><div class="grid-content bg-purple">男性</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">15,232</div></el-col>
        </el-row>
        <el-row class="party-info">
            <el-col :span="12"><div class="grid-content bg-purple">女性</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">4980</div></el-col>
        </el-row>
        <el-row class="party-info">
            <el-col :span="12"><div class="grid-content bg-purple">大专以上学历</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">3201</div></el-col>
        </el-row>
        <el-row class="party-info">
            <el-col :span="12"><div class="grid-content bg-purple">老年人比例</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">32%</div></el-col>
        </el-row>
        <el-row class="party-info">
            <el-col :span="12"><div class="grid-content bg-purple">出生率/死亡率</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">1.23</div></el-col>
        </el-row>
	</div>
</template>

<script>
export default {
    name: 'guxinPeople',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style scoped>
    .wrap{
    background: url("@/assets/images/partyPopupBg.png") rgba(8,23,73,0.8) no-repeat center center;
    background-size: 100% 100%;
    padding:70px 40px 40px;
}
    .party-head{
        display: flex;
        margin-bottom:22px;
        
    }
    .party-head img{
        width:200px;
        height:200px;
        margin-right:13px;
    }
    .party-head .txt{
        background-color: rgba(21,23,144,0.5);
        padding-left:27px;
        color:#92d5ff;
        line-height: 2;
        flex:1;
    }
    .party-head .txt .title{
        font-size: 22px;
        padding-top:12px;
    }
     .party-head .txt .mark{
         font-size: 18px;
         margin-bottom:18px;
     }
     .el-row{
         height:48px;
         line-height: 48px;
         background-color: rgba(21,23,144,0.5);
         padding:0 20px;
         color:#92d5ff;
         margin-bottom:8px;
     }
     .party-resume .title{
         font-size: 20px;
         color:#92d5ff;
         margin:25px 0
     }
      .party-resume p{
          color:#fff;
          font-size: 16px;
          line-height: 1.7;
      }
</style>